<template>
  <div class="">
    <!-- 自定义导航栏 -->
    <gh-navbar id="navbar" :showback="false" title="专业律师"  />
    <div class="lawer">
      <view class="searchBtn">
        <text class="iconfont icon-sousuo"></text>
        <input
          class="search"
          v-model="searchVal"
          placeholder-class="search-input"
          :placeholder="placeholder"
          @input="handleInputSearch"
        />
      </view>
      <div class="pick-box">
        <picker mode="region" @change="handlePickCity">
          <div class="selete">
            {{cityVal}}
            <text class="iconfont icon-xiala-yuan-tianchong"></text>
          </div>
        </picker>
        <!-- 分类 -->
        <picker class="picker" @change="handleConfirm" range-key="title" :range="cate">
          <div class="selete">
            {{cateText}}
            <text class="iconfont icon-xiala-yuan-tianchong"></text>
          </div>
        </picker>
        <!-- <div class="selete" @click="this.$refs.picker.show()">
          {{cateText}}
          <text class="iconfont icon-xiala-yuan-tianchong"></text>
        </div> -->
      </div>
      <!-- 律师卡片 -->
      <template v-for="(item, index) in lawer">
        <gh-lawer-card :item="item" :key="index" />
      </template>
      <template v-if="lawer.length == 0">
        <div class="none">
          <image class="none-img" :src="imgBaseUrl + 'none.png'" mode="widthFix" />
        </div>
      </template>
      <!-- <lb-picker
        ref="picker"
        mode="multiSelector"
        @confirm="handleConfirm"
        :level="2"
        :list="cate"
        :props="myProps"
      ></lb-picker> -->
    </div>
  </div>
</template>
<script>
import LbPicker from "@/components/lb-picker";
export default {
  data() {
    return {
      placeholder: "大家都在搜的律师...",
      searchVal: "",
      cityArr: [],
      lawer: [],
      cate: [], // 擅长领域，大小类
      page: 1,
      myProps: {
        // picker 修改键名
        label: "title",
        value: "id",
        children: "children"
      },
      timer: 0,
      cateText: '擅长领域',
      imgBaseUrl: this.$store.state.imgBaseUrl,
      newDataLength: 0, // 记录请求的数据的长度，决定是否上拉加载更多
      cateCondition : {
        main_title: '',
        vice_title: ''
      },
      regionCondition : {
        province: '',
        city: '',
        area: ''
      }

    };
  },
  computed: {
    cityVal() {
      let temp =
        this.cityArr.length === 0
          ? "全国范围"
          : this.cityArr[this.cityArr.length - 1];
      return temp;
    },
    goodAt() {
      // let temp = this.cityArr.length === 0 ? "擅长领域" : this.cityArr.join("-");
      return "擅长领域";
    }
  },
  components: {
    LbPicker
  },
  onShow() {
    let that = this;
    this.searchVal = ''
    // 初始化数据，清除上次选择的数据
    this.regionCondition = {
      province: '',
      city: '',
      area: ''
    }
    this.cityArr = []
    this.cateText = '擅长领域'
    uni.showLoading({
      title: "加载中"
    });
    // 律师卡片
    let promise1 = new Promise((resolve, reject) => {
      uni.request({
        url: that.$store.state.baseUrl + "member.index",
        data: {
          op: "getLawyerList",
          page: that.page
        },
        success(res) {
          resolve(res);
        }
      });
    });
    // 获取擅长领域，大小分类
    let promise2 = new Promise((resolve, reject) => {
      uni.request({
        url: that.$store.state.baseUrl + "member.index",
        data: {
          op: "getConsultation"
        },
        success(res) {
          resolve(res);
        }
      });
    });
    Promise.all([promise1, promise2]).then(res => {
      that.lawer = res[0].data.data.list;
      that.newDataLength = res[0].data.data.list.length;

      that.cate = res[1].data.data.list; // 分类数据
    }).finally(() => {
      uni.hideLoading();
    })
  },
  methods: {
    handleReLoad(){
      // 刷新
      uni.reLaunch({
        url: '/pages/lawer/lawer'
      });
    },
    handleInputSearch() {
      let that = this;
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        uni.showLoading({
          title: "加载中"
        });
        uni.request({
          url: that.$store.state.baseUrl + "member.index",
          data: {
            op: "getLawyerLookup",
            reply_realname: that.searchVal
          },
          success(res) {
            let data = res.data;
            if (data.code == 201) {
              // 数据为空
              that.lawer = [];
            } else if (data.code == 200) {
              that.lawer = data.data.list;
            }
            uni.hideLoading();
          }
        });
      }, 2000);
    },
    handleConfirm(e) {
      let that = this;
      const index = e.detail.value
      that.cateText = this.cate[index].title
      // 筛选接口格式
      this.cateCondition = {
        main_title: that.cateText,
      };
      uni.request({
        url: that.$store.state.baseUrl + "member.index",
        data: {
          op: "getLawyerLookup",
          key_word: this.cateCondition,
          region: this.regionCondition
        },
        success(res) {
          let data = res.data;
          if (data.code == 201) {
            // 数据为空
            that.lawer = [];
          } else if (data.code == 200) {
            that.lawer = data.data.list;
          }
        }
      });
    },
    // 选择城市
    handlePickCity(e) {
      this.cityArr = e.detail.value;
      let that = this;
      this.regionCondition = {
        province: this.cityArr[0],
        city: this.cityArr[1],
        area: this.cityArr[2]
      };
      uni.request({
        url: that.$store.state.baseUrl + "member.index",
        data: {
          op: "getLawyerLookup",
          region: this.regionCondition,
          key_word: this.cateCondition,
        },
        success(res) {
          let data = res.data;
          if (data.code == 201) {
            // 数据为空
            that.lawer = [];
          } else if (data.code == 200) {
            that.lawer = data.data.list;
          }
        }
      });
    }
  },
  // 触底
  onReachBottom(e) {
    let that = this;
    if (that.newDataLength < 20) {
      return;
    }
    let page = that.page++;
    uni.showLoading({
      title: "加载中"
    });
    uni.request({
      url: that.$store.state.baseUrl + "member.index",
      data: {
        op: "getLawyerList",
        page
      },
      success(res) {
        that.lawer = res.data.data.list
        uni.hideLoading();
      }
    });
  }
};
</script>
<style lang='less' scoped>
// 引入工具less
@import "@/common/util.less";
.lawer {
  padding: 24rpx;
  .searchBtn {
    display: flex;
    align-items: center;
    padding: 20rpx 36rpx;
    border-radius: 10rpx;
    box-shadow: 0rpx 8rpx 20rpx 8rpx #eef1ff;
    color: @font-color;
    font-size: 24rpx;
    background-color: #fff;
    .icon-sousuo {
      font-size: 28rpx;
      color: @font-color;
      margin-right: 20rpx;
    }
    .search {
      width: 100%;
    }
    /deep/.search-input {
      color: @font-color;
    }
  }
  .pick-box {
    .gh-around();
    padding: 48rpx 0 43rpx;
    .selete {
      color: #6c76a7;
      font-size: 30rpx;
      .icon-xiala-yuan-tianchong {
        color: @font-color;
        font-size: 30rpx;
        margin-left: 10rpx;
      }
    }
  }
  /deep/.swiper-item {
    margin: 0 0 15rpx 0;
  }
  .none {
    font-size: 30rpx;
    color: @font-color;
    text-align: center;
    .none-img{
      width: 50%;
      margin-top: 100rpx;
    }
  }
}
</style>